<style>
  #map1, #map2 {
    position: absolute;
    top: 0; bottom: 0;
    width: 50%;
  }
  #map2 {
    left: 50%;
  }
</style>

<div id="map1"></div>
<div id="map2"></div>

<script type="module">
  import Map from 'ol/Map';
  import View from 'ol/View';
  import TileLayer from 'ol/layer/Tile';
  import OSM from 'ol/source/OSM';

  const view = new View({
    center: [0, 0],
    zoom: 2,
  });

  const map1 = new Map({
    target: 'map1',
    layers: [new TileLayer({ source: new OSM() })],
    view: view
  });

  const map2 = new Map({
    target: 'map2',
    layers: [new TileLayer({ source: new OSM() })], // 可以换成不同图层对比
    view: view
  });
</script>
